<template>
  <div>
    <!--  折线图  -->
    <div id="lineChart" ref="lineChart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
import { querySalePriceTable } from '@/api/homePageNew/salesman'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition])

export default {
  props: {
    queryId: {
      type: [Number, String],
      default: 0 || ''
    }
  },
  data() {
    return {
      dataTime: [], // x轴 日期
      allPrice: [] // y轴 销售金额
    }
  },
  watch: {
    queryId() {
      this.querySalerRankTable()
    }
  },
  created() {
    this.querySalerRankTable()
  },
  methods: {
    querySalerRankTable() {
      this.dataTime = []
      this.allPrice = []
      const fid = window.sessionStorage.getItem('fuserId')
      querySalePriceTable({ queryId: this.queryId || fid }).then(res => {
        res.data.forEach(item => {
          this.dataTime.push(item.dateTime)
          this.allPrice.push((item.allPrice / 10000).toFixed(2))
        })
        this.drawLine()
      })
    },
    // 模板
    drawLine() {
      // // 基于准备好的dom，初始化echarts实例
      const lineChart = echarts.init(document.getElementById('lineChart'))
      // 绘制图表
      lineChart.setOption({
        title: { text: this.$t('market.salesYear') }, // '近半年销售额'
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.dataTime
        },
        yAxis: [
          {
            name: this.$t('market.rmbWy'), // '人民币(万元)',
            type: 'value'
          },
          {
            type: 'value'
          }
        ],
        series: [
          {
            data: this.allPrice,
            type: 'line', // 类型 - 线
            colorBy: 'data', // 点的颜色
            lineStyle: {
              color: '#a5a3e0' // 线条颜色
            },
            label: {
              show: true // 是否显示标签
            },
            smooth: true // 平滑显示
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
#lineChart {
  width: 100%;
  height: 500px;
}
</style>
